<template>
  <div class="report-manage">
    <div class="box-top">
      <el-form>
        <el-form-item label="日期">
          <el-date-picker clearable v-model="searchForm.time" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="currentPage=1;init()">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="box-table">
      <el-table v-loading="loading" border :data="tableData" tooltip-effect="dark">
        <el-table-column align="center" prop="day_time" label="日期" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="total_recharge_price" label="当日总充值(元)" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="total_withdraw_price" label="当日总提现(元)" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="当日总下注" prop="total_order_num" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="当日理论总奖金(元)" prop="total_theory_price" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="当日实际总奖金(元)" prop="total_bonus_price" show-overflow-tooltip></el-table-column>
      </el-table>
    </div>
    <div class="box-pagenation">
      <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
  name: 'ReportManage',
  data () {
    return {
      loading: false,
      total: 0,
      currentPage: 1,
      searchForm: {
        time: ['', '']
      },
      tableData: []
    }
  },
  created () {
    this.init()
  },
  methods: {
    ...mapActions({
      getInitData: 'reportManage/getInitData'
    }),
    handleCurrentChange (val) {
      this.currentPage = val
      this.init()
    },
    handleReset () {
      this.searchForm = {
        time: ['', '']
      }
    },
    init () {
      const { time } = this.searchForm
      const params = {
        page: this.currentPage,
        start_time: time[0] && this.$moment(time[0]).format('YYYY-MM-DD'),
        end_time: time[1] && this.$moment(time[1]).format('YYYY-MM-DD')
      }
      this.loading = true
      this.getInitData(params).then(res => {
        const { list, total } = res
        this.tableData = list
        this.total = total
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>
<style lang="less">
  .report-manage {}
</style>
